<template>
	<view class="savepadding">
		<uni-list>
			<view class="item" style="padding: 0;" v-for="(item, index) in listData" :key="index">
				<u-form ref="uform" label-width="auto">
					
					
					<u-form-item label="尾款金额" borderBottom>
						<u-input 
						v-model="item.money"
						inputAlign="right" 
						type="digit"
						border="none"
						placeholder="请输入" 
						></u-input>
					</u-form-item>
					
					<u-form-item label="尾款付款方式" borderBottom>
						<u-input 
						value="一次性付款"
						disabled disabledColor="#ffffff"
						inputAlign="right" 
						border="none"
						></u-input>
					</u-form-item>
					
					<u-form-item label="预计第一次付款日期" @click="pickerShowClick(index)" borderBottom>
						<u-input 
						:value="item.timePayment1st"
					    disabled disabledColor="#ffffff"
					    border="none"
						inputAlign="right" 
						placeholder="请选择还款方式" 
						type="select"
						></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
				</u-form>
				
				<text v-if="index != 0" class="delete" @click="deletItem(index)">删除</text>
			</view>
			
			<view style="margin: 20rpx; padding-bottom: 130rpx;">
				<button class="list-add" @click="addInsurance">+继续添加</button>
			</view>
			
		</uni-list>
		
		
		<view class="button-container">
			<button class="btn-item" @click="save">保存</button>
		</view>
		
		<!-- 保养时间 -->
		<u-datetime-picker
			:show="dateShow"
			mode="date" @confirm="timeConfirm"
			@cancel="dateShow=false"></u-datetime-picker>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				currentIndex:0,
				listData:[{
						money: '',
						timePayment1st: '',
					}	
				],
				dateShow:false
			}
		},
		
		onLoad(options) {
			
			if(!uni.$u.test.isEmpty(options.balancePaymentLst)){
				var data = JSON.parse(options.balancePaymentLst);//字符串转对象
				if(data.length > 0) {
					this.listData = data;
				}
			}else{
				this.addInsurance();
			}
		},
		
		methods: {
			
			pickerShowClick(index) {
				this.dateShow = true;
				this.currentIndex = index;
			},
			
			timeConfirm(e) {
				this.dateShow = false;
				
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				let currentItem = this.listData[this.currentIndex];
				currentItem.timePayment1st = timeStr;
				
			},
			//添加新的险种
			addInsurance() {
				let obj = {
					money: '',
					timePayment1st: '',
				}
				this.listData.push(obj);
			},
			
			deletItem(index) {
				this.listData.splice(index, 1);
			},
			
			//保存
			save() {
				
				console.log('this.listData', this.listData);
				
				this.listData = this.listData.filter(
					item => {
						return (item.money && item.timePayment1st);
					}
				).map(item=>{
					item.typeFieldName='balance_payment'
					item.typeFieldDesc='尾款'
					item.paymentMethod='5'
					return item
				})
				
				uni.$emit('addFinal', this.listData)
				
				uni.navigateBack()
			}
		}
	}
	
</script>

<style lang="scss">
	.list-add {
		line-height: 88rpx;
		border-radius: 8rpx;
		background-color: rgba($color: #1573FF, $alpha: 0.26);
		color: #1573FF;
	}
	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}
	.delete {
		display: flex;
		color: $xz-textColor-red;
		font-size: 24rpx;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;

	}
	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;
		
	}
	
</style>
